<template>
  <div>
    <t-button size="small" @click="OnClick" theme="success">
      <template #icon>
        <MoneyCircleIcon/>
      </template>
      充值
    </t-button>

    <t-drawer v-model:visible="data.show" :header="`给用户【${props.id}】充值积分`" :closeOnOverlayClick="false"
              :on-confirm="handleConfirm" @close="handleClose" size="large" destroy-on-close
              confirmBtn="确认充值积分">
      <div>
        <t-space direction="vertical" style="width: 100%">
          <t-space class="r-fx-row-czc">
            当前用户有
            <t-tag theme="warning" variant="light-outline" shape="round" size="small">
              <template #icon>
                <MoneyCircleIcon/>
              </template>
              {{ props.cur.toLocaleString() }}
            </t-tag>
          </t-space>
          <t-space breakLine>
            <t-button size="small" theme="default" @click="data.formData.coin = -props.cur">
              <template #icon>
                <MinusCircleFilledIcon/>
              </template>
              账户清空
            </t-button>
            <t-button size="small" theme="warning" @click="data.formData.coin -= 100">
              <template #icon>
                <MinusCircleFilledIcon/>
              </template>
              扣 1 百
            </t-button>
            <t-button size="small" theme="success" @click="data.formData.coin += 100">
              <template #icon>
                <AddIcon/>
              </template>
              加 1 百
            </t-button>
            <t-button size="small" theme="warning" @click="data.formData.coin -= 1000">
              <template #icon>
                <MinusCircleFilledIcon/>
              </template>
              扣 1 千
            </t-button>
            <t-button size="small" theme="success" @click="data.formData.coin += 1000">
              <template #icon>
                <AddIcon/>
              </template>
              加 1 千
            </t-button>
            <t-button size="small" theme="warning" @click="data.formData.coin -= 5000">
              <template #icon>
                <MinusCircleFilledIcon/>
              </template>
              扣 5 千
            </t-button>
            <t-button size="small" theme="success" @click="data.formData.coin += 5000">
              <template #icon>
                <AddIcon/>
              </template>
              加 5 千
            </t-button>
          </t-space>
          <t-input-number v-model="data.formData.coin" size="large" style="width: 100%"/>
          <t-space breakLine>
            <t-button size="small" theme="default" @click="data.formData.coin = 0">
              <template #icon>
                <MinusCircleFilledIcon/>
              </template>
              重置为 0
            </t-button>
            <t-button size="small" theme="warning" @click="data.formData.coin -= 10000">
              <template #icon>
                <MinusCircleFilledIcon/>
              </template>
              扣 1 万
            </t-button>
            <t-button size="small" theme="success" @click="data.formData.coin += 10000">
              <template #icon>
                <AddIcon/>
              </template>
              加 1 万
            </t-button>
            <t-button size="small" theme="warning" @click="data.formData.coin -= 100000">
              <template #icon>
                <MinusCircleFilledIcon/>
              </template>
              扣 10 万
            </t-button>
            <t-button size="small" theme="success" @click="data.formData.coin += 100000">
              <template #icon>
                <AddIcon/>
              </template>
              加 10 万
            </t-button>
            <t-button size="small" theme="warning" @click="data.formData.coin -= 1000000">
              <template #icon>
                <MinusCircleFilledIcon/>
              </template>
              扣 100 万
            </t-button>
            <t-button size="small" theme="success" @click="data.formData.coin += 1000000">
              <template #icon>
                <AddIcon/>
              </template>
              加 100 万
            </t-button>
          </t-space>
          <template v-if="data.formData.coin >= 0">
            <t-alert theme="success"
                     :message="`充值【${data.formData.coin.toLocaleString()}】积分成功后拥有【${(props.cur + data.formData.coin).toLocaleString()}】积分。`"/>
          </template>
          <template v-else>
            <t-alert theme="error"
                     :message="`充值【${data.formData.coin.toLocaleString()}】积分成功后拥有【${(props.cur + data.formData.coin).toLocaleString()}】积分。`"/>
          </template>
          <div></div>
          <div></div>
          <div></div>
          <div class="r-fx-row-c">
            <template v-if="data.formData.coin >= 0">
              <span style="font-weight: 600;font-size: 5em;color: green;">
                {{ data.formData.coin.toLocaleString() }}
              </span>
            </template>
            <template v-else>
              <span style="font-weight: 600;font-size: 5em;color: red;">{{ data.formData.coin.toLocaleString() }}</span>
            </template>
          </div>
          <div></div>
          <div></div>
          <div></div>
          <div class="r-fx-row-c">
            <span style="font-size: 2em">{{ (data.formData.coin / 10000).toFixed(2) }} 万</span>
          </div>
          <div></div>
          <div></div>
          <div>
            <t-textarea
                v-model="data.formData.intro"
                tips="充值备注信息，可以为空，最多 220 字【用户可见】。"
                placeholder="充值备注信息【用户可见】"
                :maxlength="220"
                :autosize="{ minRows: 5, maxRows: 10 }"></t-textarea>
          </div>
        </t-space>
      </div>
    </t-drawer>
  </div>
</template>
<script setup lang="ts">
import {MoneyCircleIcon, AddIcon, MinusCircleFilledIcon} from "tdesign-icons-vue-next";
import {reactive} from "vue";
import {MessagePlugin} from "tdesign-vue-next";
import api from "../../../../api/api";
import NotificationPlugin from "tdesign-vue-next/es/notification/plugin";

const props = defineProps(['id', 'cur'])
const emits = defineEmits(['success'])
const data = reactive({
  show: false,
  formData: {
    id: 0,
    coin: 0,
    intro: ''
  }
})

const OnClick = async () => {
  data.show = true
  data.formData.coin = 0
  data.formData.id = props.id
}

const handleClose = () => {
  data.show = false
}

const handleConfirm = async () => {
  if (data.formData.coin === 0) {
    await MessagePlugin.error('充值金额不能为【0】')
    return
  }
  let res = await api.Admin.User.UpdateCoin({
    id: data.formData.id,
    coin: data.formData.coin,
    intro: data.formData.intro
  })
  if (res != null) {
    data.show = false
    await NotificationPlugin.success({
      title: '充值成功',
      content: `给用户【${props.id}】成功充值【${data.formData.coin}】个积分。`,
      duration: 10000,
      placement: 'bottom-right'
    })
    emits("success")
  }
}
</script>